<template>
	<view id="app">
		<view class="container">
			<u-toast ref="uToast"></u-toast>

			<!-- 地址列表 -->
			<view v-if="addressList.length > 0">
				<view v-for="(item, index) in addressList" :key="index" class="address-card">

					<view class="address-content">
						<view>{{ item.market }}{{ item.economize }}{{ item.distinguish }}</view>
						<view class="address-note">
							<span>详细地址:{{ item.address }}</span>
						</view>
						<view class="address-phone">{{ item.consignee }} {{ item.addressPhoneNumber }}</view>
					</view>

					<u-line></u-line>

					<view style="display: flex; justify-content: flex-end; margin-top: 12px;">
						<u-icon name="edit-pen" size="20" color="#2979ff" @click="editAddress(item)"></u-icon>
						<u-icon name="trash" size="20" color="#fa3534" style="margin-left: 15px;"
							@click="deleteAddress(item)"></u-icon>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				<view style="margin-top: 20px;">暂无地址信息，请添加新地址</view>
			</view>

			<!-- 添加新地址按钮 -->
			<u-button class="add-button" type="primary" @click="addNewAddress">添加新地址</u-button>

			<!-- 提示 -->
			<view>
				<u-toast ref="uToast" />
			</view>
		</view>
	</view>

</template>

<script>
	import {
		list,
		deleteaddress
	} from '@/api/address.js'
	import store from '../../store';
	export default {
		data() {
			return {
				addressList: [],

			}
		},

		methods: {
			// 查询地址
			queryAddressMessage() {
				const addressUserId = this.$store.state.userId
				list({
					addressUserId
				}).then((res => {
					this.addressList = res.rows
				}))
			},
			// 添加地址
			addNewAddress() {
				uni.navigateTo({
					url: '/pages/mine/addnewaddress'
				});
			},
			// 删除地址
			deleteAddress(item) {
				deleteaddress({
					addressId: item.addressId
				}).then((res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success',
						})
						this.queryAddressMessage();
					}
				}))
			},
			// 更改地址
			editAddress(item) {
				let addressId = item.addressId
				this.$store.dispatch("setAddressId", addressId)
				uni.navigateTo({
					url: '/pages/mine/updateaddress'
				});

			}
		},
		mounted() {
			this.queryAddressMessage();
		}
	}
</script>


<style>
	body {
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		margin: 0;
		padding: 0;
	}

	.container {
		padding: 20px;
		max-width: 600px;
		margin: 0 auto;
	}

	.address-card {
		background: white;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.address-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.default-tag {
		background: #2979ff;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.address-content {
		color: #333;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	.address-note {
		color: #888;
		font-size: 14px;
		margin: 8px 0;
		display: flex;
		align-items: center;
	}

	.address-phone {
		color: #333;
		font-weight: 500;
	}

	.empty-state {
		text-align: center;
		padding: 40px 0;
		color: #999;
	}

	.add-button {
		position: fixed;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		max-width: 400px;
	}
</style>